<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>仪表板 - FuYuan RPC管理控制台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div th:replace="fragments/header :: header"></div>

<div class="container mt-4">
    <h1>仪表板</h1>

    <div class="row">
        <div class="col-md-4">
            <div class="card text-white bg-primary mb-3">
                <div class="card-header">总服务数</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.totalServices}">0</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-success mb-3">
                <div class="card-header">在线服务数</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.onlineServices}">0</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-secondary mb-3">
                <div class="card-header">离线服务数</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.offlineServices}">0</h5>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card text-white bg-info mb-3">
                <div class="card-header">总调用次数</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.totalCalls}">0</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-success mb-3">
                <div class="card-header">成功调用</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.successCalls}">0</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card text-white bg-danger mb-3">
                <div class="card-header">失败调用</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.failedCalls}">0</h5>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header">平均响应时间</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.averageResponseTime} + ' ms'">0 ms</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header">最大响应时间</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.maxResponseTime} + ' ms'">0 ms</h5>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-3">
                <div class="card-header">最小响应时间</div>
                <div class="card-body">
                    <h5 class="card-title" th:text="${statistics.minResponseTime} + ' ms'">0 ms</h5>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>